<template>
  <div class="detailContainer">
    <!-- 头部 -->
    <topHeader isFixed>
      <headJump ref="shop"></headJump>
    </topHeader>
    <!-- 内容区域 -->
    <div class="mainContainer">
      <!-- 轮播图区域 -->
      <div class="swiperWrap">
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" width="375" height="375" :autoplay="3000" @change="onChange">
          <van-swipe-item  v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }}/{{ images.length }}</div>
          </template>
        </van-swipe>
      </div>
      <!-- 基本详情区域 -->
      <div class="detailBaseInfo">
        <!-- 价格 -->
        <div class="priceInfo">
          <span class="left">￥</span>
          <span class="right">{{goodsInfo.retailPrice}}</span>
        </div>
        <!-- 内容信息 -->
        <div class="baseInfo">
          <!-- 信息 -->
          <div class="info">
            <div class="name">{{ goodsInfo.name }}</div>
            <div class="simpleBrandInfo">
              <div class="preLogoo"></div>
              <img class="blandLogo" src="https://yanxuan-item.nosdn.127.net/a2e6fac37ed8ee3d4d7cf83a14f4e9e2.jpg" alt="">
              <span class="title">Ulike</span>
            </div>
            <div class="desc">推荐理由</div>
          </div>
          <!-- 查看评价 -->
          <div class="comment">
            <div class="wrap">
              <div class="check-wrap">查看评价</div>
              <div class="icon">
                <van-icon name="arrow" />
              </div>
            </div>
          </div>
        </div>
        <!-- 理由列表 -->
        <div class="rcmdBanner">
          <ul>
            <li>
              <div class="key">1</div>
              <div class="recommendReason">平面闪光口，能量大、透光强，脱毛更高效</div>
            </li>
            <li>
              <div class="key">2</div>
              <div class="recommendReason">效果持久，2周明显见效，4周维持光滑</div>
            </li>
            <li>
              <div class="key">3</div>
              <div class="recommendReason">光学级蓝宝石，冷却肌表温度，无痛更护肤</div>
            </li>
            <li>
              <div class="key">4</div>
              <div class="recommendReason">全身可用，长时使用，小巧便携</div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 活动信息及参数地址区域 -->
      <div class="actionInfo">
          <div class="fill"></div>
          <!-- 上半部分 -->
          <div class="topInfo">
            <ul class="tmList">
              <li class="tmItem">
                <van-cell is-link title="邮费99包邮" @click="show = true" />
                <van-action-sheet v-model="show" title="邮费"  :round="false">
                  <div class="content">
                    <div class="rule">
                      <div class="ruleTitle" >
                        满99元免邮
                      </div>
                      <div class="ruleContent">
                        本商品由严选自营仓发货，单笔订单金额（不含邮费）大陆地区满99元免邮费，不满99元收取8元邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准。
                      </div>
                    </div>
                  </div>
                </van-action-sheet>
              </li>
              <li class="tmItem">
                <van-cell is-link title="促销：全场加价购，超值换购" @click="show = true" />
                <van-action-sheet v-model="show" title="邮费"  :round="false">
                  <div class="content">
                    <div class="rule">
                      <div class="ruleTitle" >
                        满99元免邮
                      </div>
                      <div class="ruleContent">
                        本商品由严选自营仓发货，单笔订单金额（不含邮费）大陆地区满99元免邮费，不满99元收取8元邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准。
                      </div>
                    </div>
                  </div>
                </van-action-sheet>
              </li>
              <li class="tmItem">
                <van-cell is-link title="购物返：最高返139积分" @click="show = true" />
                <van-action-sheet v-model="show" title="什么是购物返"  :round="false">
                  <div class="content">
                    <div class="rule">
                      <div class="ruleTitle" >
                        关于购物返回馈金：
                      </div>
                      <div class="ruleContent">
                        1. 回馈金是严选用以回馈用户的代币<br>
                        2. 回馈金可与现金1:1抵扣使用<br>
                        3. 回馈金使用无门槛，可叠加<br>
                        4. 购物即可返还回馈金，用户等级越高，返还比例越高<br>
                        5. 本月获取的回馈金，统一在次月25日23:59:59失效，请尽快使用<br>
                        6. 可在个人中心--回馈金中查看回馈金资产<br>
                        7. 部分特殊商品和订单不支持返还回馈金，具体以回馈金的活动说明为准<br>
                        8. 如有疑问，请联系严选在线客服
                      </div>
                    </div>
                    <div class="rule">
                      <div class="ruleTitle" >
                        关于购物返积分：
                      </div>
                      <div class="ruleContent">
                        1. 用户在严选主站购物，确认收货后按商品售价的10%返购物积分<br>
                        2. 购物返积分数值精确到个位（小数点后全部舍弃，不进行四舍五入）<br>
                        3. 拼团/众筹/砍价/虚拟商品和礼品卡支付商品订单不支持返积分<br>
                        4. 购买礼品卡订单不返积分，礼品卡消费时，按照实际消费额度进行积分返赠<br>
                        5. 如商品订单完成后退货，则在退货流程发起后24小时内对该笔订单发放的积分数进行扣除<br>
                        6. 可在【帮助中心】-积分规则查看详细说明<br>
                        7. 如有疑问，请联系严选在线客服
                      </div>
                    </div>
                  </div>
                </van-action-sheet>
              </li>
            </ul>
          </div>
          <div class="fill"></div>
          <!-- 下半部分 -->
          <div class="bottomInfo">
            <ul class="tmList">
              <li class="tmItem">
                <van-cell is-link title="请选择规格数量" @click="show = true" />
                <van-action-sheet v-model="show" title="邮费"  :round="false">
                  <div class="content">
                    <div class="rule">
                      <div class="ruleTitle" >
                        满99元免邮
                      </div>
                      <div class="ruleContent">
                        本商品由严选自营仓发货，单笔订单金额（不含邮费）大陆地区满99元免邮费，不满99元收取8元邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准。
                      </div>
                    </div>
                  </div>
                </van-action-sheet>
              </li>
              <li class="tmItem">
                <van-cell is-link title="配送：请选择配送地址" @click="show = true" />
                <van-action-sheet v-model="show" title="邮费"  :round="false">
                  <div class="content">
                    <div class="rule">
                      <div class="ruleTitle" >
                        满99元免邮
                      </div>
                      <div class="ruleContent">
                        本商品由严选自营仓发货，单笔订单金额（不含邮费）大陆地区满99元免邮费，不满99元收取8元邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准。
                      </div>
                    </div>
                  </div>
                </van-action-sheet>
              </li>
              <li class="tmItem">
                <van-cell is-link title="服务：·严选自营  ·免费送到家  ·7天无忧退还 " @click="show = true" />
                <van-action-sheet v-model="show" title="邮费"  :round="false">
                  <div class="content">
                    <div class="rule">
                      <div class="ruleTitle" >
                        满99元免邮
                      </div>
                      <div class="ruleContent">
                        本商品由严选自营仓发货，单笔订单金额（不含邮费）大陆地区满99元免邮费，不满99元收取8元邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准。
                      </div>
                    </div>
                  </div>
                </van-action-sheet>
              </li>
            </ul>
          </div>
      </div>
      <!-- 底部轮播图 -->
      <div class="bottomSwiperWrap">
        <van-swipe class="myswipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item class="item" v-for="(pic,index) in bannerList" :key="index">
            <img :src="pic" alt="">
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 底部html详情展示 -->
      <div class="itemDetail" v-html="goodsInfo.itemDetail?goodsInfo.itemDetail.detailHtml:''"></div>
    </div>
    <!-- 底部按钮区域 -->
    <div class="btnGroup">
      <van-button class="btn left" type="default">
        <van-icon name="service-o" size="30" color="#333" />
      </van-button>
      <van-button class="btn center" type="default">立即购买</van-button>
      <van-button class="btn right"  type="danger" @click="addTocart">加入购物车</van-button>
    </div>
    <!-- 底部锚点 -->
    <div class="anchor" @click="toTop" v-show="scrollTop > 650">
      <van-icon class="anchorItem" name="arrow-up" />
    </div>
  </div>
</template>

<script>
// import { getGoodsDetailInfo } from '@/axios'
import { reqSkuDetail, addCart } from '@/axios'
import { Toast } from 'vant'

export default {

  name:'productDetail',
  data(){

    return{
      current: 0,//轮播图所需数据
      images: [
      ],//轮播图懒加载所需图片数组
      show:false,//ActionSheet 动作面板展示标识
      goodsInfo:{},//商品详情对象
      scrollTop: 0, //滚动条滚动高度
      bannerList:[]//底部轮播图数据
    }
  },
  methods:{
    // 轮播图所需方法
    onChange(index) {
      this.current = index
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false
      Toast(item.name)
    },
    //  获取商品详情的方法
    async getGoodsDetailInfo(){
      // 如果没有id 就不会搜索
      if(!this.$route.query.productId){
        return
      }
      const result = await reqSkuDetail(this.$route.query.productId)
      this.goodsInfo = result.item
      // 维护底部轮播图数据
      result.item.adBanners.forEach(item => {
        this.bannerList.push(item.picUrl) 
      })
      // 维护顶部轮播图数据
      const { picUrl1, picUrl2, picUrl3, picUrl4, picUrl5 } = result.item.itemDetail
      this.images.push(picUrl1, picUrl2, picUrl3, picUrl4, picUrl5)
      
    },
    async addTocart(){
      // 收集数据
      // { productId, name, primaryPicUrl, retailPrice }
      const { id: productId, name, primaryPicUrl, retailPrice } = this.goodsInfo
      console.log(this.goodsInfo)
      console.log('添加到购物车')
      const productDetail = {  productId, name, primaryPicUrl, retailPrice }
      const res = await addCart(productDetail)
      console.log(res,productDetail)
      if(res.code === 200){
        Toast.success('添加购物车成功')
        // 通过ref 调用子组件的方法
        this.$refs.shop.getCartCount()
        
      }
    },
    // 点击锚点回到顶部的回调
    toTop() {
      let timer = null
      cancelAnimationFrame(timer)
      timer = requestAnimationFrame(function fn() {
        let oTop =
          document.body.scrollTop || document.documentElement.scrollTop
        if (oTop > 0) {
          document.body.scrollTop = document.documentElement.scrollTop =
            oTop - 50
          timer = requestAnimationFrame(fn)
        } else {
          cancelAnimationFrame(timer)
        }
      })
    },
    // 监视滚动条距离页面顶部的距离的方法
    windowScroll() {
      // 滚动条距离页面顶部的距离
      let scrollTop =
      window.pageYOffset ||
      document.documentElement.scrollTop ||
      document.body.scrollTop
      this.scrollTop = scrollTop
    },
  },
  mounted(){
    // 获取商品详情信息
    this.getGoodsDetailInfo()
    window.addEventListener('scroll', this.windowScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.windowScroll)
  },
}
</script>

<style lang="less">
  .van-overlay{
    background: rgba(0, 0,0 , 0.2);
  }
</style>
<style scoped lang="less">
.detailContainer{
  // 主要内容区域样式
  .mainContainer{
    // margin-top: 44px;
    margin-bottom: 80px;
    box-sizing: border-box;
    // 轮播图样式
    .swiperWrap{
      position: relative;
      width: 375px;
      height: 375px;
      // 轮播图样式
      .my-swipe{
        width: 375px;
        // 每一屏的样式
        .van-swipe-item {
          color: #fff;
          font-size: 20px;
          line-height: 150px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        // 切换页码部分样式
        .custom-indicator {
          position: absolute;
          right: 5px;
          bottom: 5px;
          padding: 2px 5px;
          font-size: 10px;
          color: #333;
          background: #fff;
        }
      }
     
      
    }
    // 基本详情区域样式
    .detailBaseInfo{
      box-sizing: border-box;
      background-color: #fff;
      padding: 13px 0 18px 15px;
      // 价格样式
      .priceInfo{
       display: flex;
       align-items: center;
       box-sizing: border-box;
       font-family: PingFang SC;
       font-weight: 700;
       color: #fa1e32;
       .left{
         font-size: 18px;
       }
       .right{
         font-size: 32px;
       }
      }
      // 详情样式
      .baseInfo{
        width: 360px;
        height: 100px;
        display: flex;
        margin-top: 7px;
        // 信息样式
        .info{
          flex: 1;
          padding-right: 12px;
          .name{
            font-size: 16px;
            color: #333;
            line-height: 24px;
            margin-bottom: 2px;
            font-weight: 700;
          }
          .simpleBrandInfo{
            height: 28px;
            margin-top: 3px;
            margin-bottom: 2.5px;
            display: flex;
            align-items: center;
            .preLogoo{
              width: 32px;
              height: 16px;
              margin-right: 4px;
              background: url(//yanxuan.nosdn.127.net/6366944e4ac00118969787dedf9520e7.png) no-repeat;
              background-size: 100% 100%;
            }
            .blandLogo{
              width: 14px;
              height: 14px;
              margin-right: 4px;
            }
            .title{
              font-size: 12px;
              line-height: 18px;
              color: #7f7f7f;
              margin-right: 8px;
            }
          }
          .desc{
            font-size: 12px;
            line-height: 18px;
            color: #333;
            font-weight: lighter;
          }
        }
        // 查看评价样式
        .comment{
          display: flex;
          width: 100px;
          justify-content: center;
          .wrap{
            display: flex;
            align-items: center;
            padding-left: 10px;
            font-size: 14px;
            .check-wrap{
              font-family: PingFangSC-Light;
              line-height: .20px;
              font-size: 14px;
              margin-left: -10px;
            }
            .icon{
              margin-left: 7px;
              margin-left: 12px;
            }
          }
        }
      }
      // 理由列表样式
      .rcmdBanner{
        margin: 6px 0 0;
        padding: 7px 10px;
        width: 345px;
        border-radius: 4px;
        line-height: 30px;
        background: #fafafa;
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        box-sizing: border-box;
        li{
          height: 18px;
          line-height: 18px;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #333;
          .key{
            display: inline-block;
            width: 12px;
            height: 12px;
            border: 1px solid #dd1a21;
            border-radius: 50%;
            text-align: center;
            line-height: 12px;
            font-size: 10px;
            color: #dd1a21;
            font-family: PingFang SC;
            font-weight: 700;
            margin-right: 4px;
            vertical-align: middle;
          }
          .recommendReason{
            display: inline-block;
            height: 18px;
            line-height: 18px;
            vertical-align: middle;
          }
        }
       }
      }
    // 活动信息及参数地址区域样式
    .actionInfo{
      width: 375px;
      height: 380px;
      box-sizing: border-box;
      .fill{
        width: 375px;
        height: 10px;
        background-color: #eee;
      }
      // 上半部分样式
      .topInfo{
        width: 375px;
        height: 166px;
        margin-top: 10px;
        .tmList{
          box-sizing: border-box;
          padding-left: 15px;
          overflow: hidden;
          .tmItem{
            box-sizing: border-box;
            width: 375px;
            height: 52px;
            padding-right: 20px;
            border-bottom: 2px solid rgb(212, 212, 212);
            .van-overlay{
              background-color: rgba(0,0,0,.1);
            }
            .content {
              padding: 26px 15px;
              overflow-y: scroll;
              height: 315px;
              border-top: 1px solid #d9d9d9;
              .rule{
                .ruleTitle{
                  font-size: 14px;
                  line-height: 14px;
                  height: 14px;
                  position: relative;
                  padding-left: 12px;
                  margin-bottom: 8px;
                }
                .ruleContent{
                  font-size: 14px;
                  line-height: 21px;
                  color: #7f7f7f;
                }
            }
          }
        }
        }
      }
       // 下半部分样式
      .bottomInfo{
        width: 375px;
        height: 166px;
        margin-top: 10px;
        .tmList{
          box-sizing: border-box;
          padding-left: 15px;
          overflow: hidden;
          .tmItem{
            box-sizing: border-box;
            width: 375px;
            height: 52px;
            padding-right: 20px;
            border-bottom: 2px solid rgb(212, 212, 212);
            .van-overlay{
              background-color: rgba(0,0,0,.1);
            }
            .content {
              padding: 26px 15px;
              overflow-y: scroll;
              height: 315px;
              border-top: 1px solid #d9d9d9;
              .rule{
                .ruleTitle{
                  font-size: 14px;
                  line-height: 14px;
                  height: 14px;
                  position: relative;
                  padding-left: 12px;
                  margin-bottom: 8px;
                }
                .ruleContent{
                  font-size: 14px;
                  line-height: 21px;
                  color: #7f7f7f;
                }
            }
          }
        }
        }
      }
     }
    // 底部轮播图样式
    .bottomSwiperWrap{
      width: 375px;
      height: 100px;
      .myswipe{
        width: 375px;
        .item{
           img{
            width: 100%;
            height: 100%;
          }
        }
      }
     }
    // 底部html详情展示区域样式 
    .itemDetail{
        /deep/ img {
         width: 100%!important;
         height: auto!important;
         vertical-align: top;
      }
      }
    }
  //底部按钮区域样式
  .btnGroup{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 375px;
    height: 52px;
    display: flex;
    .btn{
      height: 100%;
      &.left{
        flex: 2;
      }
      &.center{
        flex: 5;
      }
      &.right{
        flex: 5;
      }
    }
    }
  // 底部锚点样式
  .anchor {
    position: fixed;
    right: 12px;
    bottom: 63px;
    display: inline-block;
    z-index: 2;
    width: 41px;
    height: 41px;
    background-color: #eee;
    border-radius: 50%;
    text-align: center;
    line-height: 41px;
    opacity: 0.5;
    .anchorItem {
      width: 24px;
      height: 24px;
      font-size: 24px;
    }
  }
 }
  
</style>